<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-16 16:29:27
 * @LastEditTime: 2023-10-20 17:57:21
 * @LastEditors: huangshuai 
-->
<template>
  <div class="custom-dialog">
    <el-dialog v-model="dialogVisible" width="465" :show-close="false">
      <el-input
        v-model="textarea"
        :rows="4"
        type="textarea"
        placeholder="请输入你申请取消举报的理由"
        style="width: 425px"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" class="el-button"
            >取消</el-button
          >
          <el-button type="primary" @click="handleConfirm" class="el-button">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { updateBadInfoRecord } from "@/api/owner";
import { ElMessage } from "element-plus";
let $emit = defineEmits(["refreshTableData"]);
const dialogVisible = ref<boolean>(false);
const textarea = ref("");
const infoId = ref<any>();
// const context = ref<string>("");
const showDialog = (id: any) => {
  // context.value = data;
  infoId.value = id;
  dialogVisible.value = true;
};
const handleConfirm = () => {
  if (!textarea.value) {
    ElMessage({
      message: "理由不能为空！",
      type: "error",
    });
    return;
  }
  updateBadInfoRecord(infoId.value, textarea.value).then((res: any) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
    $emit("refreshTableData");
    dialogVisible.value = false;
  });
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="less">
.el-button {
  width: 100px;
  height: 50px;
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
}
.custom-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
}
</style>
